<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考核结果</title>
    <!--vue-->
    <script src="/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/index.js"></script>
    <!--axios-->
    <script src="/js/axios.min.js"></script>
</head>
<style>
    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<body>
<div id="app">
    <el-row>
        <el-col :span="4"><el-input v-model="coursename"   size="mini" placeholder="课程名称"></el-input></el-col>
        <el-col :span="4"><el-input v-model="userid"   size="mini" placeholder="培训人工号"></el-input></el-col>
        <el-col :span="4"><el-button type="primary" size="mini" @click="search()" icon="el-icon-search">搜索</el-button></el-col>
        <el-col :span="10">&nbsp;</el-col>
        <el-col :span="2">
            <el-button type="primary" size="mini" @click="flush()" icon="el-icon-search">刷新</el-button>
        </el-col>
    </el-row>
    <el-row>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="userid"
                    label="培训人工号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="培训人姓名">
            </el-table-column>
            <el-table-column
                    prop="trainername"
                    label="培训师">
            </el-table-column>
            <el-table-column
                    prop="coursename"
                    label="培训课程">
            </el-table-column>
            <!--<el-table-column-->
                    <!--prop="videograde"-->
                    <!--label="视频成绩">-->
            <!--</el-table-column>-->
            <el-table-column
                    prop="examgrad"
                    label="课程成绩">
            </el-table-column>
            <el-table-column prop="gradetype" label="培训状态">
                <template slot-scope="scope">
                    <span v-if = "scope.row.gradetype==0">培训中</span>
                    <span v-if = "scope.row.gradetype==1">通过</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="primary" size="small" round
                            @click="toEdit(scope.row.userid)"class="el-icon-edit">更新</el-button>
                </template>
            </el-table-column>

        </el-table>
    </el-row>
    <el-row>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[2,3,5,10,100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </el-row>


    <el-row>
        <!--修改弹出框-->
        <el-dialog title="修改" :visible.sync="editFormVisible">
            <el-form :model="form">
                <!--<el-form :model="form">-->
                    <!--<el-form-item label="视频成绩" :label-width="formLabelWidth">-->
                        <!--<el-input-number v-model="form.videograde" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>-->
                    <!--</el-form-item>-->
                <!--</el-form>-->
                <el-form-item label="课程成绩" :label-width="formLabelWidth">
                    <el-input-number v-model="form.examgrad" controls-position="right" @change="handleChange" :min="0" :max="100"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update()">修改</el-button>
            </div>
        </el-dialog>
    </el-row>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{//数据
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:20,
            userid:null,
            coursename:null,//搜索框
            editFormVisible:false,//编辑对话框是否显示
            form: {},//添加或者更新form
            formLabelWidth:"120px",
            videograde:[],
        },
        created:function () {
            this.loadData();
        },
        methods:{//方法
            //加载数据的方法
            loadData:function () {
                _this =this;
                //初始化数据
                axios.get('/EResult/page', {
                    params: {
                        pageNo:this.currentPage,
                        pageSize:this.pageSize,
                        coursename:this.coursename,
                        userid:this.userid
                    }
                })
                    .then(function (response) {
                        // handle success  处理成功，回调的方法
                        //console.log(response);
                        //赋值分页列表
                        _this.tableData = response.data.page;
                        //删除最后一页为空时，调到上一页
                        //alert(_this.tableData.length);
                        if(_this.tableData.length==0&&_this.currentPage!=1){
                            _this.currentPage=_this.currentPage-1;
                            _this.loadData();
                        }
                        //赋值总条数
                        _this.total = response.data.total;
                    })
                    .catch(function (error) {
                        // handle error 处理异常
                        //console.log(error);
                    })
                    .then(function () {
                        // always executed  总是执行  相当于finally
                    });
            },
            flush(){
                //刷新当前页
                location.reload();
            },
            //每页数量发生变化时
            handleSizeChange:function (v) {
                this.pageSize=v;
                this.loadData();
            },
            //当前页数放生变化是
            handleCurrentChange:function (v) {
                this.currentPage=v;
                this.loadData();
            },
            // 搜索方法
            search:function () {
                this.currentPage=1;
                this.loadData();
            },
            //跳转编辑
            toEdit:function (userid) {
                console.log("我进来了");
                this.form={};
                    axios.post('/EResult/onelist?userid='+userid).then(function (response) {
                        _this.form = response.data.list;
                    })
                this.editFormVisible=true;
            },
            tableRowClassName({row, rowIndex}) {
                if (row.gradetype===1){
                    return 'success-row';
                }
                return '';
            },
            //更新
            update:function(){
                _this = this;
                axios.post('/EResult/update',this.form).then(function (response) {
                    console.log(response);
                    if(response.status == 200){
                        //提示成功
                        _this.$message({
                            message: '恭喜你，操作成功',
                            type: 'success'
                        });
                        //_this.$message.success("恭喜你，添加成功");
                        //关闭弹出框
                        _this.editFormVisible=false;
                        //重新加载数据
                        _this.loadData();
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message.error("更新失败");
                });
            }
        }
    });
</script>
</body>
</html>